

<template>
    <view class="type-area cus-page">
        <!-- 导航栏 -->
        <ct-navbar leftIconType="back" :search="{show:true}" /> 

        <view class="top" :style="{top:topSecurityDistance+'px'}">
            <!-- (2选1) -->
            <ct-scroll-x bgColor="linear-gradient(to right, #F5F3FD ,#F3F7FD,#EEFDFE,#EEFDFE)" 
                :tab="subsections" :current="current" @cutTab="cutTab" >
            </ct-scroll-x>
            <!-- (2选1) -->
            <!-- <u-subsection :list="subsections" :current="current" @change="subsectionChange"
                bgColor="#fff" fontSize="32rpx" activeColor="#02BDF3">
            </u-subsection> -->
        </view>

        <!-- 顶部安全距离 -->
        <u-gap height="90rpx" bgColor="transparent"></u-gap>
        <!-- 瀑布流布局 -->
        <view class="com-m-t-32">
            <ct-waterfall-flow />
        </view>
    </view>
</template>


<script>
export default {
    name:'shoppingDirectory',
    components: {},
    props:{},

    data () {
        return {
            topSecurityDistance: 44,
            subsections: ["综合","卡牌","游戏王","宝可梦"],
            current: 0,
        }
    },

    computed: {},
    watch: {},

    onLoad(){
        this.setTop();
    },
    mounted() {},

    methods: {
        // 设置顶部安全距离
        setTop(){
            const sysInfo = this.mixinGetSysInfo();
            // #ifdef MP-WEIXIN
            this.topSecurityDistance = sysInfo.statusBarHeight + sysInfo.capsule.navBarH;
            // #endif
            // #ifdef APP-PLUS
            this.topSecurityDistance = sysInfo.statusBarHeight + 44;
            // #endif
        },

        // 切换(2选1)
        cutTab(e){
            this.current = e.i
        },
        // 分段器(2选1)
        subsectionChange(e){
            this.current = e;
        }
    },
}
</script>


<style scoped lang='scss'>
    .top{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

     /deep/.u-subsection--button{
        height: auto !important;
        padding: 32rpx 3px !important;
    }
    /deep/.u-subsection--button__bar{
        &:after{
            content: "";
            width: 60rpx;
            height: 6rpx;
            background: #02BDF3;
            border-radius: 4rpx;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            bottom: -20rpx;
        }
    }
</style>